import 'package:flutter/material.dart';

class GridExtentDemo extends StatelessWidget {
  const GridExtentDemo({super.key});

  static const showGrid = true; // Set to false to show ListView

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        body: Center(child: GridView.extent(
            padding: const EdgeInsets.all(10),
            //每个组件的最大长度
            maxCrossAxisExtent: 120,
            //水平子 Widget 之间的间距
            crossAxisSpacing: 10.0,
            //垂直子 Widget 之间的间距
            mainAxisSpacing: 10.0,
            // 宽高比
            childAspectRatio: 0.7,
            children: _initGridViewData())),
      ),
    );
  }


  List<Widget> _initGridViewData() {
    List<Widget> temlist = [];

    for (var i = 0; i < 12; i++) {
      temlist.add(
        Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.amber,
          ),
          child: Text(
            "第${i}个元素",
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),
      );
    }

    return temlist;
  }

}

